<template>
  <div>
    <content-body>
    <nav-bar title="购物车" />
    <div class="pay-detail">
      <ul>
        <li class="p-list" v-for="(goods,index) in shopcart" :key="goods.id">
          <mt-switch v-model="goods.isSelected"></mt-switch>
          <img :src="goods.thumb_path">
          <div class="pay-calc">
            <p>{{goods.title}}</p>
            <div class="calc">
              <span>￥{{goods.sell_price}}</span>
              <span @click="substract(goods)">-</span>
              <span>{{goods.num || 0}}</span>
              <span @click="add(goods)">+</span>
              <a href="javascript:;" @click="del(index)">删除</a>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="show-price">
      <div class="show-1">
        <p>总计(不含运费):</p>
        <span>已经选择商品{{paymenet.count}}件，总价￥{{paymenet.price}}元</span>
      </div>
      <div class="show-2">
        <mt-button type="danger" size="large">去结算</mt-button>
      </div>
    </div>
    </content-body>
  </div>
</template>
<script>
import localStorage from '@/localStorage'

export default {
  data: function () {
    return {
      shopcart: []
    }
  },
  created () {
    let goodsList = localStorage.getGoodsList()
    let ids = Object.keys(goodsList).join(',')
    console.log(ids)
    this.$axios.get('http://localhost:3000/getshopcarlist?')
      .then(res => {
        // 给this.shopcar 添加属性
        // res.data.forEach(goods => {
        //   console.log(goods)
        //   // console.log(goodsList)
        //   if (goodsList[goods.goods_id]) {
        //     goods.num = goodsList[goods.goods_id]
        //   }
        //   // 不管有无都打钩
        //   goods.isSelected = true
        // })
        // // 先丰富对象属性，一次性赋值，有效
        // this.shopcart = res.data
        // 此赋值后，改变属性无效绑定
        // 如果一定要在数据不完整的情况下添加属性，
        // 就需要手动通知vue完成响应式->双向数据绑定
        this.shopcart = res.data
        this.shopcart.forEach(goods => {
          console.log(goods)
          if (goodsList[goods.goods_id]) {
            this.$set(goods, 'num', goodsList[goods.goods_id])
            this.$set(goods, 'isSelected', true)
          } else {
            this.$set(goods, 'num', 0)
            this.$set(goods, 'isSelected', false)
          }
        })
      })
  },
  methods: {
    add (goods) {
      console.log('++被调用了')
      goods.num++
    },
    substract (goods) {
      goods.num--
    },
    del (index) {
      this.shopcart.splice(index, 1)
    }
  },
  computed: {
    paymenet () {
      let price = 0
      let count = 0
      this.shopcart.forEach(goods => {
        if (goods.isSelected) {
          count += goods.num
          price += goods.num * goods.sell_price
        }
      })
      return {
        count,
        price
      }
    }
  }
}
</script>
<style scoped>
.pay-detail ul li {
  list-style: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  margin-bottom: 3px;
}

.pay-detail ul {
  padding-left: 5px;
  margin-top: 5px;
}

.pay-detail ul li img {
  width: 80px;
  height: 80px;
  display: inline-block;
  vertical-align: top;
  margin-top: 10px;
}

.pay-detail ul li > :nth-child(1),
.pay-detail ul li > :nth-child(3) {
  display: inline-block;
}

.pay-calc p {
  display: inline-block;
  width: 250px;
  overflow: hidden;
  color: blue;
  font-size: 15px;
  margin-bottom: 10px;
}

.pay-detail ul li > :nth-child(1) {
  line-height: 80px;
}

.calc:nth-child(1) {
  color: red;
  font-size: 20px;
}

.calc span:not(:nth-child(1)) {
  border: 1px solid rgba(0, 0, 0, 0.3);
  display: inline-block;
  width: 20px;
  text-align: center;
}

.calc a {
  margin-left: 20px;
}

.show-1,
.show-2 {
  display: inline-block;
}

.show-1,
.show-2 {
  margin-left: 30px;
}

.show-price {
  background-color: rgba(0, 0, 0, 0.2);
}
</style>
